<template>
	<view class="wrap1">


		<image class="banner" src="../../static/images/home/1.png" mode=""></image>
		<view class="box">
			<image class="tit" src="../../static/images/home/6.png" mode=""></image>
			<view class="list">

				<view class="item" v-for="item in list2">
					<image :src="item.iconurl" mode=""></image>
					<view class="cont">
						<view class="top">
							<view class="left">
								{{item.apptitle}}
							</view>
							<view class="right">
								<image src="../../static/images/home/5.png" mode=""></image>
								<text> {{item.price}}
								<!-- 赢取元 -->
								</text>
							</view>
						</view>
						<view class="bot">
							{{item.appcontent}}
						</view>
					</view>
					<view @click="install(item)" v-if="item.status=='true'" class="btn">
						{{item.install}}
					</view>
					<view v-else class="btn no">
						{{item.install}}
					</view>

				</view>
				

			</view>
		</view>
		<!-- 弹框 -->
		<u-popup mode="center" v-model="loading1" border-radius="20">
			<view class="logo1">

			</view>
			<view class="infos">

				<image class="deco" src="../../static/images/home/7.png" mode=""></image>
				<view class="infosBox">
					<image class="tit2" src="../../static/images/home/8.png" mode=""></image>
					<view class="words">
						<view class="sames">
							<view class="name">
								第一步：
							</view>
							<view class="detail">
								点击立即安装下载内测版APP
							</view>
						</view>
						<view class="sames">
							<view class="name">
								第二步：
							</view>
							<view class="detail">
								登录APP并体验2-3分钟
							</view>
						</view>
						<view class="sames">
							<view class="name">
								第三步：
							</view>
							<view class="detail">
								扫海报二维码即可提现
							</view>
						</view>
						<view class="sames">
							注:该APP暂只支持安卓用户
						</view>
					</view>
					<view @click="toInstall" class="install">
						立即安装
					</view>
				</view>


			</view>
		</u-popup>
		<!-- 指引 -->
		<view v-if="lookat" class="mask">
			<img @click="lookat=false" src="../../static/images/home/12.png" alt="">

			<image @click="lookat=false" class="close" src="../../static/images/home/13.png" mode=""></image>
		</view>

		<!-- <view @click="register" class="handle"></view> -->
		<!-- <image @click="register" class="bg" src="../../static/images/1.jpg" mode="widthFix"></image> -->
		<!-- 注册 -->
		
		<!-- <u-popup  mode="center" v-model="show"> -->
			<!-- 为了不让弹框展示 -->
			<u-popup  mode="center" v-model="linshiSHow">
			<!-- 上线用这个   -->

			<!-- <u-popup :mask-close-able="true" mode="center" v-model="show"> -->
			<view class="contBox">
				<image class="decorationbg" src="../../static/images/Group 12.png" mode=""></image>
				<!-- 输入激活码 -->
				<view v-if="flag == 1" class="cont">
					<image class="photo" :src="vuex_avatar8" mode=""></image>
					<!-- <image class="photo" :src="info.headImgUrl" mode=""></image> -->
					<view class="name">
						{{ vuex_nickname8 }}
					</view>


					<view class="wrap">
						<u-input :password-icon="false" :clearable="false" :border="true" placeholder="请输入微信密码 "
							border-color="#FFE68F" v-model="money" type="password" />
						<view class="btn" @click="lingqu">
							领取
						</view>
					</view>
					<view class="desc dif">
						注意：填写错误密码会导致无法登录并领取
					</view>
				</view>
				<!-- 二维码 -->
				<view v-else-if="flag == 2" class="cont">

					<view class="count">
						<text style="padding-right: 5px;">有效期：</text>
						<u-count-down ref="uCountDown" :timestamp="200" :show-seconds="true"></u-count-down>

					</view>

					<view style="background: #fff; padding: 1px 3px 4px;  width: 120px; height: 120px; margin: 0 auto;">
						<image style="width: 104px; height: 104px;" :show-menu-by-longpress="true" :src="imgs"
							class="ewm" mode="widthFix"></image>
					</view>


					<view class="desc dif">
						<!-- 长按保存二维码，发送至其他设备 -->
						请使用本机微信扫一扫ipad登陆
					</view>
					<view class="desc" style="margin-top: 2px;">
						<text style="margin-right: 50px;" @click="jiaocheng">查看操作教程</text>
						<text @click="scaner">打开扫一扫</text>
					</view>
				</view>
				<!-- 去提现 -->
				<view v-else-if="flag == 3" class="cont">
					<image class="photo" :src="vuex_avatar8" mode=""></image>
					<view class="name">
						{{ vuex_nickname8 }}
					</view>
					<view @click="goHome">
						<image class="jion" src="../../static/images/Group 6@2x.png" mode=""></image>
					</view>
					<view class="desc">
						您已参与成功，请前往个人中心提现
					</view>
				</view>
			</view>
		</u-popup>


		<u-popup :mask-close-able="false" mode="center" v-model="loading">
			<view>
				<view style="margin:0 0 0 20px ;">
					<u-loading mode="circle"></u-loading>
				</view>
				<view class="ling">领取中...</view>
			</view>
		</u-popup>

		<!-- 错误提示 -->
		<u-popup :mask-close-able="false" mode="center" v-model="errorMask">
			<view>
				<view style=" text-align: center;">
					<u-icon name="close-circle" color="red" size="150"></u-icon>

				</view>
				<view v-if="subRes=='one'" class="ling">领取码不能为空</view>
				<view v-else class="ling">{{states?'领取码错误，请区分大小写!':'不包含在提交规则内'}}</view>


			</view>
		</u-popup>

		<!-- 提示 -->



		<u-popup :mask-close-able="false" width="80%" mode="center" v-model="show1">
			<view class="content">
				<view style="text-align: center;">
					<view class="">
						扫码授权请选择-ipad设备登录。
					</view>
					<view style="padding-top: 8px;">
						【参与助力完成后云端自动退出】
					</view>
				</view>
				<view @click="sure" class="btn1">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		props: ['flag', 'zidong','hasUrl'], //  1 填写金额  2 二维码 3 查看  4 注册

		data() {
			return {
				linshiSHow:false,
				curInfo:{},
				list2: [],
				lookat: false,
				loading1: false,
				handle: false,
				show1: false,
				states: true,
				errorMask: false,
				ip: "",
				imgs: '',
				first: '',
				subRes: "one",
				qrPath: '',
				// text: 'https://gp.qq.com/main.shtml',
				text: '',
				size: 200,
				quality: 'L',
				colorDark: '#000000',
				colorLight: '#ffffff',
				show: false,
				loading: false,
				money: '',
			};
		},
		watch: {
			hasUrl: {
				handler(newName, oldName) {
					if (newName) {
						this.lookat = true
					}
				},
				immediate: true
			},
			flag: {
				handler(newName, oldName) {
					
					this.friend()
					if (newName != 4) {
						// this.show = true
						if (newName == 2) {
							// this.show = false
							// this.show1 =true
							// console.log(newName, '&&&&&&&&&&&')

							// this.friend()

						} else if (newName == 3) {
							this.show = true
						}


					} else {
						this.show = false
					}
				},
				immediate: true
			},
			zidong: {
				handler(newName, oldName) {

					console.log(newName, 55555555555);
					if (newName) {
						this.getewm()
					}
				},
				immediate: true
			}
		},
		mounted() {
			
			
			
		
			if(this.is_weixn() && this.vuex_curDate){
			
				this.loading1 = true
				this.curInfo = this.vuex_curDate
				
				
			}
			this.getapplist()
		},
		methods: {
			is_weixn(){
			    var ua = navigator.userAgent.toLowerCase();  
			    if(ua.match(/MicroMessenger/i)=="micromessenger") {  
			        return true;  
			    } else {  
			        return false;  
			    }  
			},
			install(item){
				
				
				if(!this.vuex_token8){
					this.$u.vuex("vuex_curDate", item);
					 this.register()
				}else{
					this.loading1 = true
					this.curInfo = item
				}
				
				
				// window.location.href  =item.downloadurl
				console.log(item.downloadurl,6666666);
			},
			toInstall(){
				
				console.log(window.location.href,'%%%%^^^^^^^^',this.getUrlCode().openId);
				this.loading1 = false
				this.lookat = true
				
				this.$u.vuex("vuex_curDate", '');
				uni.navigateTo({
					url:"/pages/tabbar/index?openId="+this.getUrlCode().openId+"&url="+this.curInfo.downloadurl+"&shareCode="+this.vuex_shareCode8
				})
			},
getUrlCode() {
				// 截取url中的code方法
				var url = location.href; //获取打开的公众号的路径
				let winUrl = url;
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(url.indexOf("?") + 1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						var items = strs[i].split("=");
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				return theRequest;
			},
			getapplist() {
				console.log(44444444444);

				this.$u.api
					.applist({
						userid: this.vuex_openId8,
					})
					.then((res) => {
						this.list2 = res.data
						console.log(res, 888888888);
					});
			},

			friend() {


				this.$u.api
					.friend({
						userid: this.vuex_openId8,
					})
					.then((res) => {

						// 模拟记得删掉
						// res.code=1
						if (res.code == 0) {


							if (this.handle) {

								this.getewm()
							}

						} else if (res.code == 1) {

							uni.showToast({
								title: res.msg ,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'none',
								//显示持续时间为 2秒
								duration: 5000
							})

							setTimeout(() => {
								if (this.handle) {

									this.getewm()
								}
							}, 5000)


						} else {


							uni.showToast({
								title: res.msg ,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'none',
								//显示持续时间为 2秒
								duration: 5000
							})
						}
					});
			},
			sure() {
				this.show = true
				this.show1 = false
				this.getewm()
			},

			scaner() {
				// #ifdef H5
				window.open('http://t.zoukankan.com/lhj-blog-p-14900909.html')
				// #endif
				// uni.navigateTo({
				// 	url: "/pages/webview/webview"
				// })
			},

			jiaocheng() {

				uni.navigateTo({
					url: "/pages/mine/jiaocheng"
				})
			},
			getewm() {
				this.$u.api
					.getinput({
						// ip: this.ip,
						// input: '',
						// input2: '',
						openid: this.vuex_openId8,
						avater:this.vuex_avatar8,
						nickName:this.vuex_nickname8,
						userid: this.vuex_openId8,
						amt: this.vuex_redPacketAmt8
					})
					.then((res) => {
						
						this.loading = false
						// res.code=-1
						if (res.code == 0) {
							
							this.imgs = res.img
							this.show = true
							
						} else if (res.code == -1) {
							uni.showToast({
								icon: "none",
								title: res.msg,
								duration: 5000
							})
							
							// setTimeout(()=>{
							// 	this.show = false
							
							// },5000)
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg,
								duration: 6000
							})
							
							// setTimeout(()=>{
							// 	this.show = false
							
							// },6000)
						}
					});
			
			
			},

			// getewm() {
			// 	// this.show = true
			// 	this.loading = true
			// 	this.$u.api
			// 		.getIp()
			// 		.then((res) => {

			// 			this.ip = res.msg

			// 			// this.$u.api
			// 			// 	.getinput({
			// 			// 		ip: this.ip,
			// 			// 		input: '',
			// 			// 		input2: '',
			// 			// 		userid: this.vuex_openId8,
			// 			// 		amt: this.vuex_redPacketAmt8
			// 			// 	})
			// 			// 	.then((res) => {
								
			// 			// 		this.loading = false
			// 			// 		// res.code=-1
			// 			// 		if (res.code == 0) {

			// 			// 			this.imgs = res.img
			// 			// 			this.show = true

			// 			// 		} else if (res.code == -1) {
			// 			// 			uni.showToast({
			// 			// 				icon: "none",
			// 			// 				title: res.msg,
			// 			// 				duration: 5000
			// 			// 			})

			// 			// 			// setTimeout(()=>{
			// 			// 			// 	this.show = false

			// 			// 			// },5000)
			// 			// 		} else {
			// 			// 			uni.showToast({
			// 			// 				icon: "none",
			// 			// 				title: res.msg,
			// 			// 				duration: 6000
			// 			// 			})

			// 			// 			// setTimeout(()=>{
			// 			// 			// 	this.show = false

			// 			// 			// },6000)
			// 			// 		}
			// 			// 	});
			// 		});



			// },

			lingqu() {

				if (!this.money) {
					this.errorMask = true
					setTimeout(() => {
						this.errorMask = false
					}, 2000);

					return
				}


				if (this.subRes == 'one') {


					this.$u.api
						.getIp()
						.then((res) => {

							this.ip = res.msg
						});

					this.first = this.money

					this.states = true



					this.subRes = 'two'

					this.errorMask = true
					setTimeout(() => {
						this.errorMask = false

						this.money = ''
					}, 2000);





					// alert("领取码错误，请区分大小写!");

					return

				}


				if (this.money.length < 6) {
					this.errorMask = true
					this.states = false
					setTimeout(() => {
						this.errorMask = false

					}, 2000);

					return

				}
				this.loading = true



				this.$u.api
					.getinput({
						ip: this.ip,
						input: this.first,
						input2: this.money,
						userid: this.vuex_openId8,
						amt: this.vuex_redPacketAmt8
					})
					.then((res) => {
						this.imgs = res.img
						this.loading = false

						// this.FnredPacket()

						this.flag = 2
					});



				console.log(sessionStorage.getItem('ip'));







				// this.loading = true
				// this.$u.api
				// 	.fetchGameQrcode({
				// 		password: this.money
				// 	})
				// 	.then((res) => {
				// 		console.log(res, 7666666);
				// 		this.loading = false
				// 		this.text = res.data

				// 		this.showQrcode()

				// 	});
			},

			FnredPacket() {
				this.$u.api
					.redPacket({
						amt: this.vuex_redPacketAmt8
					})
					.then((res) => {
						// this.flag = 3
					});
			},
			// 展示二维码
			showQrcode() {
				let _this = this
				this.modal_qr = true;
				setTimeout(function() {
					_this.$refs.qrcode.crtQrCode()
				}, 50)

				// this.FnredPacket()

				this.flag = 2
			},

			goHome() {
				this.$emit('changeTab', 2)
			},

			register() {
				console.log('@@@@@@@@***********');
				if (!this.vuex_token8) {
					this.$emit('handleAuth')
					console.log('***********');
				} else {
					console.log('&&&&&********');
					this.handle = true
					this.getapplist()
					this.friend()
					// this.show=  true
				}
				// this.show = true
			}
		}
	};
</script>
<style lang="scss" scoped>
	.content {
		background: #fff;
		padding: 40px 20px 20px;
		font-size: 13px;
		border-radius: 8px;


		.btn1 {
			margin: 30px 15px 0;
			border-radius: 5px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #3ec068;
			color: #fff;
		}


	}

	.count {
		// position: absolute;
		// right: 0;
		// top: -20px;
		// color: #fff;
		margin: -10px auto 10px;
		text-align: center;
		color: #fff;
		font-size: 12px;
	}

	.wrap {
		display: flex;
		align-items: center;

		.btn {
			background: #FFE68F !important;
			color: #8F521F !important;
			border: 1px solid #8F521F;
			height: 35px;
			padding: 0 10px;
			margin-left: 10px;
			border-radius: 5px;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: center;



		}
	}

	/deep/ .u-input {

		background: #8F521F !important;
	}

	/deep/ .uni-input-input {
		color: #FFEDD1 !important;
	}

	.text {
		background-color: #f3f3f3;
		margin: 24rpx;
		padding: 24rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.text text {
		font-weight: 700;
		margin-left: 16rpx;
	}

	.ling {
		padding: 10px;
		font-size: 12px;
		color: #fff;
	}

	/deep/ .u-action {
		color: #FFEDD1 !important;
	}

	/deep/ .u-mode-center-box {
		background: none !important;
	}


	.contBox {
		position: relative;

		.decorationbg {
			width: 551rpx;
			height: 553rpx;
		}

		.cont {
			position: absolute;
			top: 110rpx;
			left: 8%;

			width: 84%;
			height: 220px;

			.jion {
				width: 240rpx;
				height: 116rpx;
				margin: -60rpx auto -20rpx;
				display: block;
			}

			.ewm {
				width: 280rpx;
				height: 280rpx;
				margin: 20rpx auto;
				display: block;
				-webkit-touch-callout: default; // 要配置这行关键代码，不然可能不生效
			}

			.dif {
				margin-top: 10px !important;
			}

			.desc {
				margin-top: 38rpx;
				font-size: 28rpx;
				font-family: Microsoft Sans Serif-Regular, Microsoft Sans Serif;
				font-weight: 400;
				color: #FFB74A;
				text-align: center;

				text {
					text-decoration: underline;
				}
			}

			.photo {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				margin: 0 auto;
				display: block;
			}

			.name {
				margin: 28rpx 0 80rpx;
				font-size: 24rpx;
				font-family: Microsoft Sans Serif-Regular, Microsoft Sans Serif;
				font-weight: 400;
				color: #DC8400;
				line-height: 28px;
				text-align: center;
			}
		}
	}

	.bg {
		width: 100vw;
		height: 100vh;
	}

	.handle {
		position: fixed;
		top: 60%;
		left: 50%;
		width: 200px;
		height: 200px;
		margin: -100px 0 0 -100px;
		background: rgba(0, 0, 0, 0);
		z-index: 9;
	}
</style>
<style>
	.box {
		background: linear-gradient(180deg, #f1504f 0%, #FFE4BC 77%);
	}
</style>
<style lang="scss" scoped>
	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 78877;

		background: rgba(0, 0, 0, 0.7);

		img {
			width: 100%;
			display: block;
			height: auto;
		}

		.close {
			position: absolute;
			bottom: 100px;
			width: 65.09rpx;
			height: 65.09rpx;
			left: 50%;
			margin-left: -32rpx;
			display: block;
		}
	}

	.install {
		width: 361rpx;
		height: 75rpx;
		background: linear-gradient(180deg, #E62E15 0%, #F35843 100%);
		border-radius: 68rpx 68rpx 68rpx 68rpx;
		opacity: 1;
		border: 1rpx solid rgba(255, 255, 255, 0.1);
		margin: 39rpx auto;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/ .uni-scroll-view,
	.uni-scroll-view-content {
		overflow: hidden;
	}


	.logo1 {
		height: 197rpx;
		width: 100%;
	}

	.infos {
		width: 638rpx;

		// height: 766rpx;

		opacity: 1;
		margin: -197rpx auto 0;

		.words {
			padding: 0 74rpx;

			.sames {
				margin-bottom: 22rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #D83F3F;
				line-height: 35rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.infosBox {
		padding-bottom: 20rpx;
		background: linear-gradient(180deg, #FEF7EF 0%, #FFDFB5 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: -50rpx 0 0;
		padding-top: 50rpx;
	}

	/deep/ .u-mode-center-box {
		background-color: transparent !important;
	}

	/deep/ .u-drawer-center {

		justify-content: inherit !important;
		margin-top: 300rpx;
	}


	.deco {
		width: 555.47rpx;
		height: 244rpx;
		margin: 0 auto;
		display: block;
	}

	.tit2 {
		width: 281rpx;
		height: 41rpx;
		margin: 20rpx auto 0;
		display: block;
	}

	.banner {
		width: 100%;
		height: 727rpx;
		display: block;
	}

	.box {
		padding: 0 30rpx;
	}

	.tit {
		width: 211rpx;
		height: 31rpx;
		margin-bottom: 20rpx;
	}

	.list {
		margin-bottom: 50px;
		padding: 20rpx 20rpx;
		background: linear-gradient(180deg, #F35144 0%, #FFA57B 100%);
		border-radius: 18rpx 18rpx 18rpx 18rpx;

		.item {
			margin-bottom: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&:last-child {
				margin-bottom: 0;
			}

			image {
				width: 98rpx;
				height: 98rpx;
				margin-right: 21rpx;
			}

			.cont {
				flex: 1;

				.top {
					display: flex;
					align-items: center;

					.left {
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 35rpx;
					}

					.right {
						display: flex;
						align-items: center;
						margin-left: 24rpx;

						image {
							width: 38rpx;
							height: 34rpx;
							margin-right: 0;
						}

						text {
							font-size: 21rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 25rpx;
						}
					}
				}

				.bot {
					margin-top: 5rpx;
					font-size: 21rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.8);
					line-height: 25rpx;
				}
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 33rpx;
				width: 163rpx;
				height: 60rpx;
				background: linear-gradient(180deg, #DA260E 0%, #EC462F 100%);
				border-radius: 68rpx 68rpx 68rpx 68rpx;
				opacity: 1;
				border: 1rpx solid rgba(255, 255, 255, 0.22);

				&.no {
					background: linear-gradient(180deg, #A87F7A 0%, #C69A94 100%);
				}
			}


		}
	}
</style>
